<script setup lang="ts">
import { getFilmParai } from "@/api/zhang";
import { useRoute, useRouter } from "vue-router";
import { showImagePreview } from "vant";

const route = useRoute();
const router = useRouter();

import { ref, computed, onMounted } from "vue";

const film = ref("");
const actors = ref("");
const feedall = ref("");
const item = ref("");
const comment = ref("");
const questions = ref([]);
const reviews = ref([]);
const loading = ref(true); // 控制加载状态
const isExpanded = ref(false); // 控制文本展开或收起的状态

const movieScore = ref(false); // 影评- jia

getFilmParai(route.query.movieId).then((res) => {
  // console.log(res.data);
  // movieOnInfoList.value = res.data.movieList
  // listlength.value = res.data.movieList.lNength
  // movieIds.value = res.data.movieIds
  item.value = res.data;
  film.value = res.data.movie;
  actors.value = res.data.celebrities;
  feedall.value = res.data.feedVideos;
  comment.value = res.data.comments;
  movieScore.value = res.data.realtime;
  questions.value = res.data.questions;
  reviews.value = res.data.filmReviews;

  // console.log(comment.value.hotComments)

  // 数据加载完成后将 loading 置为 false
  loading.value = false;
});
//控制文本展开或收起
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
};
// 剧照
const juzhao = (movie) => {
  // console.log(movie);
  router.push({
    path: "/stage",
    query: {
      movieId: movie.id,
      photosnm: movie.nm,
    },
  });
};

// 演职人员
const crew = (movie) => {
  // console.log(movie)
  router.push({
    path: "/crew",
    query: {
      movieId: movie.id,
    },
  });
};

const video = (movie) => {
  // console.log(movie)
  router.push({
    path: "/fvideo",
    query: {
      movieId: movie.product.productId,
    },
  });
};

const filme = (movie) => {
  // console.log(movie)
  router.push({
    path: "/fil",
    query: {
      movieId: movie.id,
    },
  });
};
const videos = (film) => {
  // console.log(movie)
  router.push({
    path: "/fvideo",
    query: {
      movieId: film.id,
    },
  });
};

//判断数据里面是否有5个数据
const connentssss = computed(() => {
  if (comment?.value?.hotComments?.length > 5) {
    return comment?.value?.hotComments?.slice(5);
  } else {
    return comment?.value?.hotComments;
  }
});

// 预览图片
const previewImages = (index) => {
  const images = actors.value.map((item) => item.avatar);
  showImagePreview({
    images,
    startPosition: index,
  });
};

// zyy
const wantwatch = (item) => {
  const token = JSON.parse(localStorage.getItem("token")); // 获取 token
  const users = JSON.parse(localStorage.getItem("users")) || []; // 获取用户列表

  if (token) {
    const username = token; // 假设 token 存储的是用户名
    const user = users.find((user) => user.username === username); // 查找用户

    if (user) {
      if (!Array.isArray(user.wantwatch)) {
        user.wantwatch = []; // 如果没有 wantwatch 列表，初始化为空数组
      }

      // 查找该电影是否已经在 wantwatch 列表中
      const index = user.wantwatch.findIndex(
        (existingItem) => JSON.stringify(existingItem) === JSON.stringify(item)
      );

      if (index === -1) {
        // 如果该电影不在列表中，添加到 wantwatch 列表
        user.wantwatch.push(item);
      } else {
        // 如果该电影已经在列表中，移除它
        user.wantwatch.splice(index, 1);
      }

      // 更新 users 数组到 localStorage
      localStorage.setItem("users", JSON.stringify(users));

      // 更新 wantwatchList
      wantwatchList.value = user.wantwatch; // 更新响应式列表
    } else {
      console.error("用户未找到");
    }
  } else {
    // 如果用户未登录，跳转到登录页面
    router.push({
      path: "/login",
      query: {
        target: route.fullPath, // 当前页面路径
      },
    });
  }
};

import { onMounted } from "vue";

// wantwatchList 用来存储当前用户的想看电影列表
const wantwatchList = ref([]);

// 获取用户的想看列表
onMounted(() => {
  const token = JSON.parse(localStorage.getItem("token"));
  const users = JSON.parse(localStorage.getItem("users")) || [];
  const username = token;

  const user = users.find((user) => user.username === username);

  if (user && Array.isArray(user.wantwatch)) {
    wantwatchList.value = user.wantwatch;
  } else {
    wantwatchList.value = []; // 如果没有找到或 wantwatch 不是数组，初始化为空数组
  }
});

// 判断当前电影是否在 wantwatchList 中
const isInWantwatch = (film) => {
  return wantwatchList.value.some((item) => item.id === film.id); // 假设每个电影有一个 id
};

const likedComments = ref(new Set()); // 存储已点赞的评论 ID
const upCounts = ref({}); // 存储各评论的点赞数

// 初始化点赞状态和计数
const initLikes = () => {
  // 从 localStorage 恢复点赞状态
  const savedLikes = localStorage.getItem("likedComments");
  if (savedLikes) {
    likedComments.value = new Set(JSON.parse(savedLikes));
  }

  // 从 localStorage 恢复点赞数
  const savedUpCounts = localStorage.getItem("upCounts");
  if (savedUpCounts) {
    upCounts.value = JSON.parse(savedUpCounts);
  }
};

// 持久化点赞状态
const saveLikedComments = () => {
  localStorage.setItem("likedComments", JSON.stringify([...likedComments.value]));
};

// 持久化点赞数
const saveUpCounts = () => {
  localStorage.setItem("upCounts", JSON.stringify(upCounts.value));
};

// 切换点赞状态并更新点赞数
const toggleLike = (id, initialCount) => {
  if (likedComments.value.has(id)) {
    // 取消点赞
    likedComments.value.delete(id);

    // 点赞数减 1，但不能低于初始值
    if (upCounts.value[id] > initialCount) {
      upCounts.value[id] -= 1;
    }
  } else {
    // 添加点赞
    likedComments.value.add(id);

    // 点赞数加 1
    if (!upCounts.value[id]) {
      // 如果未初始化点赞数，使用初始值
      upCounts.value[id] = initialCount + 1;
    } else {
      upCounts.value[id] += 1;
    }
  }

  // 持久化状态到 localStorage
  saveLikedComments();
  saveUpCounts();
};

// 页面加载时恢复状态
onMounted(() => {
  initLikes();
});
</script>

<template>
  <div class="a" v-if="item" :style="{ backgroundColor: film.backgroundColor }">
    <!-- <van-skeleton title :row="50" /> -->
    <div class="back">
      <p class="backa" @click="$router.back()">猫眼电影</p>
      <span>&gt;</span>
      <p>{{ film?.nm }}</p>
    </div>

    <!-- 头部 -->
    <div class="a1">
      <div @click="videos(film)" class="a1a">
        <img :src="film?.img" alt="" />
        <van-icon name="play" />
      </div>
      <div class="a1b">
        <h3>{{ film?.nm }}</h3>
        <div class="a1ba">
          <p>{{ film?.enm }}</p>
          <p>{{ film?.cat?.split(",").join(" / ") }}</p>
          <p>{{ film?.star?.split(",").join(" / ") }}</p>
          <p>
            {{ film?.pubDesc }} /
            <span>
              {{
                film?.episodeDur !== 0 ? `${film?.episodeDur}分钟` : `${film?.dur}分钟`
              }}
            </span>
          </p>
        </div>
        <div class="a1c" @click="wantwatch(film)">
          <span class="a1ca">
            <img
              src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/want-to-watch.png"
              alt=""
            />
            <p>{{ isInWantwatch(film) ? "已想看" : "想看" }}</p>
          </span>
        </div>
      </div>
    </div>

    <div
      class="filmReview b1"
      @click="
        $router.push({
          path: '/watchdata',
          query: {
            movieId: item.movie.id,
            nm: item.movie.nm,
            pubDesc: item.movie.pubDesc,
            img: item.movie.img,
          },
        })
      "
    >
      <div class="top">
        <div style="display: flex">
          <img
            src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/logo-new.png"
            alt=""
          />
          <span style="color: #fff">猫眼购票评分</span>
        </div>
        <div>
          <span>{{ item?.realtime?.wish }} 人想看</span>
          <span>{{ item?.realtime?.watched }} 人看过</span>
        </div>
      </div>
      <div class="score">
        <div style="text-align: center">
          <span class="sc">{{ item?.movie?.sc }}</span> <br />
          <span class="sunm">{{ item?.movie?.snum }}人评</span>
        </div>
        <div></div>
      </div>
      <p class="content">
        <van-icon name="good-job-o" size="14rem" style="margin-right: 4rem" />{{
          item?.movie?.shortComment?.content
        }}
      </p>
    </div>

    <!-- 简介 -->
    <div class="c1">
      <div class="c1a">
        <p>简介</p>
        <div class="c1aa" v-if="!isExpanded" @click="toggleExpand">
          <span>展开</span>
          <van-icon name="arrow-down" />
        </div>
        <div class="c1aa" v-if="isExpanded" @click="toggleExpand">
          <span>收起</span>
          <van-icon name="arrow-up" />
        </div>
      </div>
      <div class="c1b">
        <!-- 展开/收起的内容，使用动态绑定来控制显示的文本长度 -->
        <p :style="isExpanded ? {} : { '-webkit-line-clamp': 3 }">
          {{ film?.shareInfo?.content?.slice(3) }}
        </p>
      </div>
    </div>

    <!-- 演职人员 -->
    <div class="d1" v-if="actors">
      <div class="d1a">
        <p>演职人员</p>
        <div class="d1aa" @click="crew(film)">
          <span>全部</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="d1b">
        <!-- actor.id  人物的id -->
        <div class="d1ba" v-for="(actor, index) in actors" :key="index">
          <img :src="actor?.avatar" alt="" @click="previewImages(index)" />
          <p>{{ actor?.cnm }}</p>
          <span>{{ actor?.desc }}</span>
        </div>
      </div>
    </div>

    <!-- 视频 -->
    <div class="e1" v-if="feedall?.feeds">
      <div class="e1a">
        <p>视频</p>
        <div class="e1aa">
          <span>全部</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="e1b">
        <div
          @click="video(feed)"
          class="eaba"
          v-for="(feed, index) in feedall?.feeds"
          :key="index"
        >
          <van-image
            width="140rem"
            height="100rem"
            fit="cover"
            :src="feed?.images[0]?.url"
          />
          <van-icon name="play" />
        </div>
      </div>
    </div>

    <!-- 剧照 -->
    <div class="f1" @click="juzhao(film)" v-if="film?.photos">
      <div class="f1a">
        <p>剧照</p>
        <div class="f1aa">
          <span>全部{{ film?.pn }}张</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="f1b">
        <div class="faba" v-for="img in film?.photos" :key="img.id">
          <van-image width="140rem" height="100rem" fit="cover" :src="img" />
        </div>
      </div>
    </div>

    <!-- 短评 -->
    <div class="j" v-if="connentssss?.length > 0">
      <p class="jp">短评</p>
      <div class="j1" v-for="com in connentssss" :key="com.id">
        <div class="j2">
          <van-image round width="33rem" height="33rem" :src="com?.avatarUrl" />
        </div>
        <div class="j3">
          <div class="j3a">
            <div class="j3aa">
              <div class="j3aaa">
                <p>{{ com?.nick }}</p>
                <img
                  v-if="com?.userLevel === 6"
                  src="https://obj.pipi.cn/festatic/common/image/398f1eddf16521a5205a5417fb4c99e0.png"
                  alt=""
                />
                <img
                  v-if="com?.userLevel === 5"
                  src="https://obj.pipi.cn/festatic/common/image/2cff8f94a4f83f464be185fb2279a365.png"
                  alt=""
                />
                <img
                  v-if="com?.userLevel === 4"
                  src="https://obj.pipi.cn/festatic/common/image/d01ce8fba731fb827e1d412efb94f025.png"
                  alt=""
                />
                <img
                  v-if="com?.userLevel === 3"
                  src="https://obj.pipi.cn/festatic/common/image/c853ef8e3cb69ad7bced9c38c39af045.png"
                  alt=""
                />
                <img
                  v-if="com?.userLevel === 2"
                  src="https://obj.pipi.cn/festatic/common/image/e3137a2114dfa0f5da5f0d6f5743c8cf.png"
                  alt=""
                />
                <img
                  v-if="com?.userLevel === 1"
                  src="https://obj.pipi.cn/festatic/common/image/57da8b3f82af5d61cedb29cf54b0d2ce.png"
                  alt=""
                />
              </div>
              <div class="j3aab">
                <van-image
                  src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/star-full-graded.png"
                  v-for="(i, index) in Math.floor(com?.score / 2)"
                  :key="index"
                />

                <van-image
                  src="	https://obj.pipi.cn/festatic/asgard/resources/images/movie/star-half-graded.png"
                  v-if="com?.score % 2 === 1"
                />

                <van-image
                  src="	https://obj.pipi.cn/festatic/asgard/resources/images/movie/star-not-graded.png"
                  v-for="(i, index) in Math.floor((10 - com?.score) / 2)"
                  :key="index"
                />
                <span>{{ com?.score }}分</span>
                <p v-if="com?.tagList[0]?.name">{{ com?.tagList[0]?.name }}</p>
              </div>
            </div>
            <div
              class="j3ab"
              :class="{ liked: likedComments.has(com.id) }"
              @click="toggleLike(com.id, com.upCount)"
            >
              <!-- 动态更新 icon 名称 -->
              <van-icon :name="likedComments.has(com.id) ? 'good-job' : 'good-job-o'" />
              <p :class="{ likedText: likedComments.has(com.id) }">
                {{ upCounts[com.id] || com.upCount }}
              </p>
            </div>
          </div>
          <div class="j3b">
            <p>{{ com?.content }}</p>
          </div>
          <div class="j3c">
            <span>
              {{
                new Date(com?.time).toLocaleDateString("zh-CN", {
                  month: "2-digit",
                  day: "2-digit",
                })
              }}
            </span>
          </div>
          <span class="jhx"></span>
        </div>
      </div>
      <div class="jjj">
        <p>共{{ comment?.total }}个短评></p>
      </div>
    </div>
    <div class="hx"></div>

    <!-- 讨论 -->

    <div
      class="k"
      v-if="questions && questions?.questions && questions?.questions?.length > 0"
    >
      <div class="k1">
        <p>讨论</p>
      </div>
      <div class="k2" v-for="(ques, index) in questions?.questions" :key="index">
        <div class="k2a">
          <h3>{{ ques?.question?.content }}</h3>
          <span>{{ ques?.question?.answerCnt }}个讨论</span>
        </div>
        <p v-if="ques?.answer?.content">{{ ques?.answer?.content }}</p>
        <p v-else>暂无讨论</p>
        <span class="khx"></span>
      </div>

      <div class="kkk">
        <p>共{{ questions?.total }}个讨论></p>
      </div>
    </div>
    <div class="hx"></div>

    <!-- 长评 -->

    <!-- 票房 -->
    <div class="g">
      <div class="g1">
        <div class="g1a">
          <p>票房</p>
          <div class="g1aa">
            <span>票房详情</span>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="g1b">
          <!-- 判断是否有数据 -->
          <div
            class="g1ba"
            v-if="item?.mbox?.mbox?.firstWeekBox && item?.mbox?.mbox?.lastDayRank"
          >
            <span>{{ item?.mbox?.mbox?.lastDayRank }}</span>
            <p>昨日排行</p>
          </div>
          <div
            class="g1ba"
            v-if="item?.mbox?.mbox?.firstWeekBox && item?.mbox?.mbox?.lastDayRank"
          >
            <span>{{ item?.mbox?.mbox?.firstWeekBox?.toLocaleString() }}</span>
            <p>首周票房(万)</p>
          </div>

          <div class="g1ba" v-else-if="item?.mbox?.mbox?.firstWeekBox">
            <span>{{ item?.mbox?.mbox?.firstWeekBox?.toLocaleString() }}</span>
            <p>首周票房(万)</p>
          </div>
          <div class="g1ba" v-else>
            <span>{{ item?.mbox?.mbox?.lastDayRank }}</span>
            <p>昨日排行</p>
          </div>
          <div class="g1bb">
            <span>{{ item?.mbox?.mbox?.sumBox?.toLocaleString() }}</span>
            <p>累计票房(万)</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 占位线 -->
    <div class="hx"></div>

    <!-- 相关资讯 -->
    <div class="h" v-if="item?.newsList?.newsList.length > 0">
      <div class="h1">
        <div class="h1a">
          <p>相关资讯</p>
          <div class="h1aa">
            <span>全部</span>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="h1b" v-for="items in item?.newsList?.newsList" :key="items.id">
          <div class="hengxian"></div>
          <div class="h1ba">
            <p>{{ items?.title }}</p>
            <van-image
              width="220rem"
              height="76rem"
              fit="cover"
              :src="items?.previewImages[0]?.url"
            />
          </div>
          <div class="h1bb">
            <div class="h1bba">
              <p>{{ items?.source }}</p>
              <span>
                {{
                  new Date(items?.created).toLocaleDateString("zh-CN", {
                    year: "numeric",
                    month: "2-digit",
                    day: "2-digit",
                  })
                }}
              </span>
            </div>
            <div class="h1bbb">
              <div class="h1bbba">
                <img
                  src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/read-num.png"
                  alt=""
                />
                <p>{{ items?.viewCount }}</p>
              </div>
              <div class="h1bbbb">
                <img
                  src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/replying-comments.png"
                  alt=""
                />
                <p>{{ items?.type }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="hx"></div>

    <!-- 相关影片 -->
    <div class="z-all">
      <div class="z">
        <div class="z1">
          <p>相关影片</p>
        </div>
        <div class="z2">
          <div
            @click="filme(movie)"
            class="z2a"
            v-for="movie in item.relatedMovies"
            :key="movie.id"
          >
            <van-image width="88rem" height="120rem" fit="contain" :src="movie?.img" />
            <p>{{ movie?.title }}</p>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <p>影视行业信息 <span>《免责声明》</span> I 违法和不良信息举报电话：123456789</p>
      <img
        src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/bottom-logo.png"
        alt=""
      />
    </footer>

    <div class="i">
      <div class="i1">
        <img
          src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/share-icon.png"
          alt=""
        />
      </div>
      <div
        class="i-all"
        @click="$router.push({ path: '/movieintro', query: { movieId: film.id } })"
      >
        <div class="i2">
          <p>特惠购票</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.j3ab.liked {
  .van-icon {
    color: red !important;
  }
  p {
    color: red !important;
  }
}

.z-all {
  height: 200rem;
  width: 100%;
  background-color: #ffffff;
  .z {
    width: 95%;
    margin: 0 auto;
    .z1 {
      p {
        padding-top: 10rem;
        padding-left: 4rem;
        font-size: 15rem;
      }
    }
    .z2 {
      padding-top: 10rem;
      width: 100%;
      display: flex;
      overflow: hidden;
      overflow-x: scroll;
      scrollbar-width: none;
      .z2a {
        margin: 0 5rem 0 5rem;

        p {
          font-size: 13rem;
          display: -webkit-box; /* 必须，启用块级布局 */
          -webkit-box-orient: vertical; /* 必须，设置布局为垂直方向 */
          overflow: hidden; /* 隐藏超出部分 */
          -webkit-line-clamp: 1; /* 限制显示行数 */
          text-overflow: ellipsis; /* 显示省略号 */
        }
      }
    }
  }
}
.k {
  background-color: white;

  .kkk {
    padding-top: 20rem;
    width: 100%;
    height: 40rem;
    text-align: center;
    line-height: 40rem;
    color: red;
  }
  .k1 {
    height: 40rem;
    padding: 15rem 0 0 15rem;
    font-size: 15rem;
    border-bottom: 1rem solid #f1eaea;
    p {
    }
  }
  .k2 {
    height: 120rem;
    padding-top: 15rem;
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .khx {
      width: 100%;
      height: 1rem;
      background-color: #f1eaea;
    }
    .k2a {
      h3 {
        font-size: 16rem;
        font-weight: 700;
      }
      span {
        font-size: 12rem;
      }
    }
    p {
      font-size: 13rem;
      display: -webkit-box; /* 必须，启用块级布局 */
      -webkit-box-orient: vertical; /* 必须，设置布局为垂直方向 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
      -webkit-line-clamp: 2; /* 限制显示行数 */
      text-align: justify; /* 设置文本左右对齐 */
    }
  }
}
.j {
  margin-top: 20rem;
  background-color: white;
  border-radius: 10rem 10rem 0 0;
  .jjj {
    padding-top: 20rem;
    width: 100%;
    height: 40rem;
    text-align: center;
    line-height: 40rem;
    color: red;
  }
  .jp {
    padding: 10rem 0 0 15rem;
    font-size: 15rem;
  }
  .j1 {
    padding-top: 25rem;
    width: 92%;
    margin: 0 auto;
    display: flex;
  }
  .j3 {
    width: 100%;
    margin-left: 10rem;

    .j3a {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .j3aa {
        width: 100%;
        .j3aaa {
          display: flex;
          p {
            font-size: 12rem;
          }
          img {
            width: 36rem;
            height: 16rem;
            margin-left: 5rem;
          }
        }
        .j3aab {
          .van-image {
            width: 9rem;
            height: 9rem;
            margin-right: 2rem;
          }
          span {
            font-size: 12rem;
            color: #ffb400;
          }
          p {
            display: inline-block; /* 根据内容撑开 */
            font-size: 10rem;
            padding: 2rem;
            border-radius: 8rem;
            color: red;
            border: 1rem solid red;
            margin-left: 5rem;
          }
        }
      }
      .j3ab {
        display: flex;
        align-items: center;
        margin-right: 15rem;
        border: 1rem solid #e4d4d4;
        border-radius: 13rem;
        padding: 5rem;
        .van-icon {
          font-size: 14rem;
        }
        p {
          padding-left: 5rem;
          font-size: 12rem;
          color: #999;
        }
      }
    }
    .jhx {
      margin-top: 10rem;
      position: absolute;
      width: 80%;
      height: 1rem;
      background-color: #f8f2f2;
    }
    .j3b {
      padding-top: 10rem;

      p {
        font-size: 14rem;
        display: -webkit-box; /* 必须，启用块级布局 */
        -webkit-box-orient: vertical; /* 必须，设置布局为垂直方向 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
        -webkit-line-clamp: 7; /* 限制显示行数 */
        line-height: 1.5; /* 设置每行的行高 */
        text-align: justify; /* 设置文本左右对齐 */
      }
    }
    .j3c {
      padding-top: 10rem;
      span {
        font-size: 12rem;
      }
    }
  }
}
.i {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60rem;
  background-color: white;
  display: flex;
  align-items: center;
  border-radius: 8rem 8rem 0 0;

  .i1 {
    width: 25%;
    height: 100%;

    img {
      width: 19rem;
      height: 19rem;
      margin: 18rem 0 0 30rem;
    }
  }

  .i-all {
    width: 75%;
  }

  .i2 {
    width: 95%;
    height: 80%;
    background-color: #fe4c5e;
    border-radius: 40rem;
    margin-right: 30rem;

    p {
      font-size: 15rem;
      color: white;
      line-height: 48rem;
      text-align: center;
    }
  }
}

footer {
  width: 100%;
  height: 100rem;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 60rem;

  p {
    font-size: 10rem;
    color: #a9b2b3;

    span {
      color: #4e759e;
    }
  }

  img {
    width: 78rem;
    height: 22rem;
  }
}

.h1 {
  background-color: #ffffff;
  width: 345rem;
  margin: 0 auto;
  border-radius: 10rem;

  .hengxian {
    width: 100%;
    height: 2rem;
    background-color: #f2f2f2;
    margin-bottom: 20rem;
  }

  .h1a {
    width: 100%;
    height: 30rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 15rem;
    }

    .h1aa {
      display: flex;
      align-items: center;

      span {
        font-size: 12rem;
        color: #a9b2b3;
      }

      .van-icon {
        font-size: 12rem;
        color: #a9b2b3;
        margin-top: 1rem;
      }
    }
  }

  .h1b {
    margin-top: 15rem;

    height: 135rem;
    .h1ba {
      width: 100%;
      display: flex;
      align-items: start;

      p {
        font-size: 16rem;
        margin: 0;
      }

      img {
        width: 110rem;
        height: 78rem;
      }
    }

    .h1bb {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 10rem;

      .h1bba {
        display: flex;
        align-items: center;

        p {
          font-size: 12rem;
          color: #999;
        }

        span {
          font-size: 12rem;
          color: #999;
          margin-left: 10rem;
        }
      }

      .h1bbb {
        display: flex;

        .h1bbba {
          width: 80rem;
          display: flex;

          img {
            width: 13rem;
            height: 13rem;
          }

          p {
            font-size: 12rem;
            color: #999;
          }
        }

        .h1bbbb {
          display: flex;

          img {
            width: 13rem;
            height: 13rem;
          }

          p {
            font-size: 12rem;
            color: #999;
            padding-right: 10rem;
          }
        }
      }
    }
  }
}

.hx {
  width: 100%;
  height: 10rem;
  background-color: #f2f2f2;
}

.g {
}
.g1 {
  background-color: #ffffff;
  width: 345rem;
  height: 120rem;
  margin: 0 auto;
  border-radius: 10rem;

  .g1a {
    width: 100%;
    height: 30rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 15rem;
    }

    .g1aa {
      display: flex;
      align-items: center;

      span {
        font-size: 12rem;
        color: #a9b2b3;
      }

      .van-icon {
        font-size: 12rem;
        color: #a9b2b3;
        margin-top: 1rem;
      }
    }
  }

  .g1b {
    width: 100%;
    display: flex;
    margin-top: 10rem;

    .g1ba {
      height: 70rem;
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      background-color: #f8f8f8;

      span {
        color: #f13d37;
        font-size: 16rem;
      }

      p {
        font-size: 12rem;
        color: #84898a;
      }
    }

    .g1bb {
      height: 70rem;
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      background-color: #f8f8f8;

      span {
        color: #f13d37;
        font-size: 16rem;
      }

      p {
        font-size: 12rem;
        color: #a9b2b3;
      }
    }
  }
}

.f1 {
  width: 345rem;
  margin: 0 auto;
  margin-top: 20rem;
  border-radius: 10rem;

  .f1a {
    width: 100%;
    height: 30rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 16rem;
      color: #ffffff;
    }

    .f1aa {
      display: flex;
      align-items: center;

      span {
        font-size: 12rem;
        color: #a9b2b3;
      }

      .van-icon {
        font-size: 12rem;
        color: #a9b2b3;
        margin-top: 1rem;
      }
    }
  }

  .f1b {
    display: flex;
    overflow: hidden;
    overflow-x: scroll;
    scrollbar-width: none;

    .faba {
      margin: 5rem;
    }
  }
}

.e1 {
  width: 345rem;
  margin: 0 auto;
  margin-top: 20rem;
  border-radius: 10rem;

  .e1a {
    width: 100%;
    height: 30rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 16rem;
      color: #ffffff;
    }

    .e1aa {
      display: flex;
      align-items: center;

      span {
        font-size: 12rem;
        color: #a9b2b3;
      }

      .van-icon {
        font-size: 12rem;
        color: #a9b2b3;
        margin-top: 1rem;
      }
    }
  }

  .e1b {
    display: flex;
    overflow: hidden;
    overflow-x: scroll;
    scrollbar-width: none;

    .eaba {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 5rem;
      position: relative;

      .van-icon {
        width: 35rem;
        height: 35rem;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        text-align: center;
        line-height: 35rem;
        font-size: 20rem;
        color: #222222;
        position: absolute;
        top: 40%;
        left: 40%;
      }
    }
  }
}

.d1 {
  width: 345rem;
  height: 180rem;
  margin: 0 auto;
  margin-top: 20rem;
  border-radius: 10rem;

  .d1a {
    width: 100%;
    height: 30rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 16rem;
      color: #ffffff;
    }

    .d1aa {
      display: flex;
      align-items: center;

      span {
        font-size: 12rem;
        color: #a9b2b3;
      }

      .van-icon {
        font-size: 12rem;
        color: #a9b2b3;
        margin-top: 1rem;
      }
    }
  }

  .d1b {
    display: flex;
    overflow: hidden;
    overflow-x: scroll;
    scrollbar-width: none;

    .d1ba {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 5rem;

      img {
        width: 80rem;
        height: 112rem;
      }

      p {
        font-size: 14rem;
        color: #ffffff;
        margin: 0;
        display: -webkit-box; /* 必须，启用块级布局 */
        -webkit-box-orient: vertical; /* 必须，设置布局为垂直方向 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
        -webkit-line-clamp: 1; /* 限制显示行数 */
        line-height: 1.5; /* 设置每行的行高 */
        text-align: justify; /* 设置文本左右对齐 */
      }

      span {
        font-size: 12rem;
        color: #a9b2b3;
        margin-top: 1rem;
        display: -webkit-box; /* 必须，启用块级布局 */
        -webkit-box-orient: vertical; /* 必须，设置布局为垂直方向 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
        -webkit-line-clamp: 1; /* 限制显示行数 */
        line-height: 1.5; /* 设置每行的行高 */
        text-align: justify; /* 设置文本左右对齐 */
      }
    }
  }
}

.c1 {
  width: 345rem;
  margin: 0 auto;
  margin-top: 20rem;
  border-radius: 10rem;

  .c1a {
    width: 100%;
    height: 40rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 15rem;
      color: #ffffff;
    }

    .c1aa {
      display: flex;
      align-items: center;

      span {
        font-size: 12rem;
        color: #a9b2b3;
        font-weight: 400;
      }

      .van-icon {
        font-size: 13rem;
        color: #a9b2b3;
        margin-top: 2rem;
      }
    }
  }

  .c1b {
    p {
      font-size: 14.5rem;
      color: #ffffff;
      line-height: 25rem;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      //   -webkit-line-clamp: 3;
      white-space: normal;
    }
  }
}

.b1 {
  width: 345rem;
  height: 90rem;
  background-color: rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  margin-top: 25rem;
  border-radius: 10rem;
}

.filmReview {
  font-size: 12rem;
  padding: 12rem;

  .top {
    display: flex;
    justify-content: space-between;
    color: #fff;

    img {
      width: 20rem;
      height: 20rem;
    }

    span {
      color: #777;
    }
  }

  .score {
    .sc {
      color: #ffb400;
      font-size: 26rem;
      font-weight: bold;
      text-align: center;
    }

    .sunm {
      font-size: 14rem;
      color: #ffffff66;
    }
  }
  .content {
    margin-top: 4rem;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 4rem;
    padding: 4rem 5rem;
    margin-left: 10rem;
    color: #fffadf;
    font-size: 12rem;
  }
}

.a1 {
  width: 345rem;
  height: 143rem;
  margin: 0 auto;
  display: flex;

  .a1a {
    margin-top: 20rem;
    position: relative;

    img {
      width: 100rem;
      height: 138rem;
    }

    .van-icon {
      width: 30rem;
      height: 30rem;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      text-align: center;
      line-height: 30rem;
      font-size: 16rem;
      color: #eceded;
      position: absolute;
      top: 85%;
      left: 5%;
    }
  }

  .a1b {
    height: 100% !important;
    margin-top: 17rem;
    flex-grow: 1;
    margin-left: 0.24rem;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 10rem;

    h3 {
      width: 221rem;
      font-size: 20rem;
      color: #ffffff;
      font-weight: 700;
      margin: 0;
      display: -webkit-box; /* 必须，启用块级布局 */
      -webkit-box-orient: vertical; /* 必须，设置布局为垂直方向 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
      -webkit-line-clamp: 1; /* 限制显示行数 */
      line-height: 1.5; /* 设置每行的行高 */
      text-align: justify; /* 设置文本左右对齐 */
    }

    .a1ba {
      display: flex;
      flex-direction: column;

      p {
        font-size: 12rem;
        color: #a9b2b3;
        margin: 0;
        display: -webkit-box; /* 必须，启用块级布局 */
        -webkit-box-orient: vertical; /* 必须，设置布局为垂直方向 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
        -webkit-line-clamp: 1; /* 限制显示行数 */
        line-height: 1.5; /* 设置每行的行高 */
        text-align: justify; /* 设置文本左右对齐 */
      }
    }
  }

  .a1c {
    width: 117rem;
    height: 30rem;
    display: flex;
    justify-content: space-around;
    background: hsla(0, 0%, 100%, 0.35);
    box-shadow: 0 0.02rem 0.08rem 0 rgba(0, 0, 0, 0.1);
    border-radius: 8rem;

    .a1ca {
      display: flex;
      align-items: center;

      img {
        width: 14rem;
        height: 14rem;
      }

      p {
        font-size: 15rem;
        color: #fbfcf9;
        font-weight: 400;
        margin-left: 0.5em;
      }
    }
  }
}

.back {
  display: flex;
  align-items: center;
  color: #c4bebe;
  font-size: 14rem;
  padding: 15rem 0 0 15rem;
  .backa {
    padding-right: 5rem;
  }
  span {
    padding-right: 5rem;
  }
}
h3,
p {
  margin: 0;
}

.g,
.h {
  width: 100%;
  background-color: white;
}
</style>
